<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/reset.css">
    <script src="../../js/statistics.js"></script>
    <title>兑换记录</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        header.header{
            background: #2a2c33;
            color: #ffffff;
        }
        .header h1{
            color:#fff;
            font-size:18px;
        }
        .header a{
            color:#fff;
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, table, th, td, select, option {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:before{
            display:table;
            content:'';
        }
        .clearfix:after{
            display:table;
            content:'';
            clear:both;
        }
        .nomessage{
            text-align: center;
            position:fixed;
            top:50%;
            left:50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            /*display:none;*/
            width:100%;
        }
        .nomessage>img{
            width:36%;
            margin-bottom:15px;
        }
        .nomessage>span{
            font-size: 17px;
            color:#ccc;
            display:inline-block;
        }


        .list>li{
            height:71px;
            border-bottom:1px solid #e5e5e5;
            position:relative;
        }
        .list>li>div{
            width:50px;
            height:50px;
            position:absolute;
            left: 10px;
            top:10px;
            background:url("../../images/exchange/3.png") no-repeat center center;
            background-size:cover;
        }
        .list>li>p{
            font-size: 15px;
            line-height: 15px;
            color:#333;
            position: absolute;
            top: 12px;
            left: 70px;
        }
        .list>li>span{
            color:#999;
            font-size: 14px;
            position:absolute;
            left: 70px;
            bottom:12px;
        }
        .list>li>a{
            font-size: 24px;
            line-height: 70px;
            color:#fc4f41;
            position:absolute;
            right:10px;
        }
        .hidden{
            display: none;
        }

    </style>

</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">兑换记录</h1>
</header>
<div class="mui-content">
    <div class="nomessage hidden">
        <img src="../../images/exchange/23.png" alt="" ><br>
        <span>积分换好礼，期待您的光临!</span>
    </div>
    <ul class="list">

    </ul>
</div>
    <script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
    <script src="../../plugins/mui/mui.min.js"></script>
    <script src="../../js/getApiToken.js"></script>
    <script type="text/javascript" src="../../js/md5.js" ></script>
    <script>
        mui.init({

        });

        mui.plusReady(function(){
            var user_token=plus.storage.getItem('cg_user_token'),
                    user_id=plus.storage.getItem('cg_user_id');
            var wait = plus.nativeUI.showWaiting('正在加载中...');
            myAjax('exchange/exchangelist/record','post',{user_id:user_id,user_token:user_token},function(data){
                if(data.success){
                    console.log(JSON.stringify(data));
                    if(data.data==''){
                        $(".nomessage").removeClass("hidden");
                    }else{
                        var list=data.data;
                        addList(list);
                        jump();
                    }
                    wait.close();
                }else{
                    wait.close();
                    mui.alert("网络错误，请重新尝试");
                }
            });
            function jump() {
                $(".list").on('click','li',function() {
                    var record_id = $(this).attr('data-id');
                    console.log(record_id+'列表的id');
                    mui.openWindow({
                        url: 'recordmain.html',
                        extras: {
                            'record_id': record_id
                        }
                    })
                });
            }

        })
        function addList(list){
                var html='';

                for(var i=0;i<list.length;i++){
                    html+='<li data-id="'+list[i].record_id+'">'+
                        '<div style="background-image:url('+_baseUrl+list[i].product_img+')"></div>'+
                        '<p>'+list[i].product_name+'</p>'+
                        '<span>'+time(list[i].create_time)+'</span>'+
                        '<a>-'+list[i].content+'</a>'+
                    '</li>';
                    console.log(list[i].record_id);
                }
            function time(time) {
                    var time=new Date(time*1000);
                 return time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate();
            }
                $('.list').append(html);
        } 
    </script>
</body>
</html>